<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="generator" content="Docusaurus v2.0.0-alpha.54">
<link rel="preconnect" href="https://www.google-analytics.com">
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-128126650-1","auto"),ga("send","pageview")</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://www.googletagmanager.com">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-128126650-1"></script>
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-128126650-1",{})</script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400&family=Roboto:wght@900&display=swap">

<title data-react-helmet="true">JavaScript and Gulpfiles | gulp.js</title>

<meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="JavaScript and Gulpfiles | gulp.js"><meta data-react-helmet="true" name="description" content="# JavaScript and Gulpfiles"><meta data-react-helmet="true" property="og:description" content="# JavaScript and Gulpfiles"><meta data-react-helmet="true" property="og:url" content="https://gulpjs.com//docs/en/getting-started/javascript-and-gulpfiles">

<link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.png">


<link rel="stylesheet" href="/styles.8121b95c.css">


<link rel="preload" href="/styles.10c0193b.js" as="script">

<link rel="preload" href="/runtime~main.ae01ffbb.js" as="script">

<link rel="preload" href="/main.3e1928f1.js" as="script">

<link rel="preload" href="/1.fe6bacd8.js" as="script">

<link rel="preload" href="/2.77a8f44b.js" as="script">

<link rel="preload" href="/1be78505.2d41add8.js" as="script">

<link rel="preload" href="/37.ee8d4ee9.js" as="script">

<link rel="preload" href="/10002e1b.63b80d46.js" as="script">

<link rel="preload" href="/17896441.f1e2ba83.js" as="script">

<link rel="preload" href="/b8ed529a.f3a2524b.js" as="script">

</head>
<body>

<div id="__docusaurus">
<nav class="navbar navbar--light navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><a class="navbar__brand" target="_self" href="/"><img class="navbar__logo" src="/img/gulp.svg" alt="gulp"></a><a activeclassname="navbar__link--active" class="navbar__item navbar__link noWrap_BxdH" href="/docs/en/getting-started/quick-start">Get Started</a><a activeclassname="navbar__link--active" class="navbar__item navbar__link noWrap_BxdH" href="/docs/en/api/concepts">API</a><a activeclassname="navbar__link--active" class="navbar__item navbar__link noWrap_BxdH" href="/plugins">Plugins</a><a target="_blank" rel="noopener noreferrer" href="https://github.com/sponsors/gulpjs" class="navbar__item navbar__link noWrap_BxdH">Donate</a><a activeclassname="navbar__link--active" class="navbar__item navbar__link emphasis_1Gl9 noWrap_BxdH" href="/docs/en/support/for-enterprise">Enterprise</a></div><div class="navbar__items navbar__items--right"><a target="_blank" rel="noopener noreferrer" href="https://twitter.com/gulpjs" class="navbar__item navbar__link navbar__link--icon noWrap_BxdH"><img class="navbarIcon_2_MD" src="/img/twitter.svg" alt="Gulp on Twitter"></a><a target="_blank" rel="noopener noreferrer" href="https://medium.com/gulpjs" class="navbar__item navbar__link navbar__link--icon noWrap_BxdH"><img class="navbarIcon_2_MD" src="/img/medium.svg" alt="The gulp blog"></a><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon search-icon-hidden" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar-expanded"></div></div></div></nav><div class="main-wrapper"><div class="docPage_1kjD"><div class="docSidebarContainer_1cYp"><div class="sidebar_1kLs"><div class="menu menu--responsive menu_w2sC"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_2vk4" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/en/getting-started/quick-start">Quick Start</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" tabindex="0" href="/docs/en/getting-started/javascript-and-gulpfiles">JavaScript and Gulpfiles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/en/getting-started/creating-tasks">Creating Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/en/getting-started/async-completion">Async Completion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/en/getting-started/working-with-files">Working with Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/en/getting-started/explaining-globs">Explaining Globs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/en/getting-started/using-plugins">Using Plugins</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/en/getting-started/watching-files">Watching Files</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/en/api/concepts">Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/en/api/src">src()</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/en/api/dest">dest()</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/en/api/symlink">symlink()</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/en/api/lastrun">lastRun()</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/en/api/series">series()</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/en/api/parallel">parallel()</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/en/api/watch">watch()</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/en/api/task">task()</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/en/api/registry">registry()</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/en/api/tree">tree()</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/en/api/vinyl">Vinyl</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/en/api/vinyl-isvinyl">Vinyl.isVinyl()</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/en/api/vinyl-iscustomprop">Vinyl.isCustomProp()</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Support</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/en/support/for-enterprise">For Enterprise</a></li></ul></li></ul></div></div></div><main class="docMainContainer_FFX1"><div class="container padding-vert--lg docItemWrapper_1cc7"><div class="row"><div class="col docItemCol_2GOA"><div class="docItemContainer_2cwg"><article><div class="markdown"><h1><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="javascript-and-gulpfiles"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#javascript-and-gulpfiles" title="Direct link to heading">#</a>JavaScript and Gulpfiles</h1><p>Gulp allows you to use existing JavaScript knowledge to write gulpfiles or to use your experience with gulpfiles to write plain JavaScript. Although a few utilities are provided to simplify working with the filesystem and command line, everything else you write is pure JavaScript.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="gulpfile-explained"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#gulpfile-explained" title="Direct link to heading">#</a>Gulpfile explained</h2><p>A gulpfile is a file in your project directory titled <code>gulpfile.js</code> (or capitalized as <code>Gulpfile.js</code>, like Makefile), that automatically loads when you run the <code>gulp</code> command. Within this file, you&#x27;ll often see gulp APIs, like <code>src()</code>, <code>dest()</code>, <code>series()</code>, or <code>parallel()</code> but any vanilla JavaScript or Node modules can be used. Any exported functions will be registered into gulp&#x27;s task system.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="transpilation"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#transpilation" title="Direct link to heading">#</a>Transpilation</h2><p>You can write a gulpfile using a language that requires transpilation, like TypeScript or Babel, by changing the extension on your <code>gulpfile.js</code> to indicate the language and install the matching transpiler module.</p><ul><li>For TypeScript, rename to <code>gulpfile.ts</code> and install the <a href="https://www.npmjs.com/package/ts-node">ts-node</a> module.</li><li>For Babel, rename to <code>gulpfile.babel.js</code> and install the <a href="https://www.npmjs.com/package/@babel/register">@babel/register</a> module.</li></ul><p><strong>Most new versions of node support most features that TypeScript or Babel provide, except the <code>import</code>/<code>export</code> syntax. When only that syntax is desired, rename to <code>gulpfile.esm.js</code> and install the <a href="https://www.npmjs.com/package/esm">esm</a> module.</strong></p><p>For a more advanced dive into this topic and the full list of supported extensions, see our <a href="/docs/en/documentation-missing">gulpfile transpilation</a> documentation.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="splitting-a-gulpfile"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#splitting-a-gulpfile" title="Direct link to heading">#</a>Splitting a gulpfile</h2><p>Many users start by adding all logic to a gulpfile. If it ever grows too big, it can be refactored into separate files.</p><p>Each task can be split into its own file, then imported into your gulpfile for composition. Not only does this keep things organized, but it allows you to test each task independently or vary composition based on conditions.</p><p>Node&#x27;s module resolution allows you to replace your <code>gulpfile.js</code> file with a directory named <code>gulpfile.js</code> that contains an <code>index.js</code> file which is treated as a <code>gulpfile.js</code>. This directory could then contain your individual modules for tasks.  If you are using a transpiler, name the folder and file accordingly.</p></div></article><div class="margin-vert--lg"><nav class="pagination-nav"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/en/getting-started/quick-start"><div class="pagination-nav__link--sublabel">Previous</div><div class="pagination-nav__link--label">« Quick Start</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/en/getting-started/creating-tasks"><div class="pagination-nav__link--sublabel">Next</div><div class="pagination-nav__link--label">Creating Tasks »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_TbNY"><ul class="contents contents__left-border"><li><a href="#gulpfile-explained" class="contents__link">Gulpfile explained</a></li><li><a href="#transpilation" class="contents__link">Transpilation</a></li><li><a href="#splitting-a-gulpfile" class="contents__link">Splitting a gulpfile</a></li></ul></div></div></div></div></main></div></div><footer class="footer"><div class="container"><div class="row footer__links"><div class="col footer__col"><ul class="footer__items"><li class="footer__item"><img src="/img/gulp-white-logo.svg" alt="gulp" href="/"></li></ul></div><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/en/getting-started/quick-start">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/en/api/concepts">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" target="_blank" rel="noopener noreferrer" href="https://github.com/gulpjs/gulp">GitHub</a></li><li class="footer__item"><a class="footer__link-item" target="_blank" rel="noopener noreferrer" href="https://stackoverflow.com/questions/tagged/gulp">Stack Overflow</a></li><li class="footer__item"><a class="footer__link-item" target="_blank" rel="noopener noreferrer" href="https://twitter.com/gulpjs">Twitter</a></li></ul></div></div><div class="text--center"><div></div></div></div></footer>
</div>

<script src="/styles.10c0193b.js"></script>

<script src="/runtime~main.ae01ffbb.js"></script>

<script src="/main.3e1928f1.js"></script>

<script src="/1.fe6bacd8.js"></script>

<script src="/2.77a8f44b.js"></script>

<script src="/1be78505.2d41add8.js"></script>

<script src="/37.ee8d4ee9.js"></script>

<script src="/10002e1b.63b80d46.js"></script>

<script src="/17896441.f1e2ba83.js"></script>

<script src="/b8ed529a.f3a2524b.js"></script>


</body>
</html>